<template>
  <q-header class="bg-white text-grey-8" height-hint="98">

    <q-toolbar class="GPL__toolbar" style="min-height: 49px">
      <q-btn
        flat
        dense
        round
        @click="leftDrawerOpen = !leftDrawerOpen"
        aria-label="Menu"
        icon="menu"
        class="q-mx-md"
      />

      <q-toolbar-title v-if="$q.screen.gt.sm" shrink class="row items-center no-wrap">
        <img src="https://cdn.quasar.dev/img/layout-gallery/logo-google.svg">
        <span class="q-ml-sm">Photos</span>
      </q-toolbar-title>

      <q-space />

      <div class="q-gutter-sm row items-center no-wrap">
        <q-btn round dense flat color="text-grey-7" icon="apps">
          <q-tooltip>Google Apps</q-tooltip>
        </q-btn>
        <q-btn round dense flat color="grey-8" icon="notifications">
          <q-badge color="red" text-color="white" floating>
            2
          </q-badge>
          <q-tooltip>Notifications</q-tooltip>
        </q-btn>
        <q-btn round flat>
          <q-avatar size="26px">
            <img src="https://cdn.quasar.dev/img/boy-avatar.png">
          </q-avatar>
          <q-tooltip>Account</q-tooltip>
        </q-btn>
      </div>

    </q-toolbar>

    <q-separator/>

    <q-tabs
      dense
      v-model="currentTab"
      align="left"
      inline-label
      class="bg-white text-overline"
    >
      <q-tab
        v-for="(tab,index) in currentTabs"
        :key="index"
        :name="tab.path"
        :class="{'bg-blue-1 text-primary':currentTab===tab.path}"
      >
        <div class="row items-center">
          <span class="q-mr-xs">{{tab.label}}</span>
          <q-btn v-if="tab.path!=='home'" @click.stop="closeTab(tab.path)" icon="close" flat size="8px" round/>
        </div>
      </q-tab>
    </q-tabs>

    <q-separator/>

  </q-header>
</template>

<script>
  export default {
    name: 'MyHeader',
    data () {
      return {
        search:'',
        leftDrawerOpen: false,
        icecream:true,
      }
    },
    watch:{
      currentTab(value){
        this.$router.push({ path: value })
      }
    },
    methods:{
      closeTab (path) {
        this.$store.commit('nav/removeCurrentTab', path)
      },
    },
    computed:{
      currentTabs () {
        return this.$store.state.nav.currentTabs
      },
      currentTab: {
        get () {
          return this.$store.state.nav.currentTab
        },
        set (val) {
          this.$store.commit('nav/updateCurrentTab', val)
        }
      }
    }
  }
</script>

<style lang="sass">
  .q-tab
    padding: 0
    .q-tab__content
      padding: 0
</style>
